<template>
    <div>
        <weatherInfo class="tablePages" :ok= "ok"></weatherInfo>
        <populationInfo class="tablePages" :ok= "ok"></populationInfo>
        <economicInfo class="tablePages" :ok= "ok"></economicInfo>
        <environmenInfo class="tablePages" :ok= "ok"></environmenInfo>
    </div>
</template>
<script>
import weatherInfo from "@/components/weatherinfo";
import populationInfo from "@/components/populationinfo";
import economicInfo from "@/components/economicinfo";
import environmenInfo from "@/components/environmeninfo";
export default {
    name: "tablePages",
    data: function () {
  	return {
  		ok: true
  	    }
    },
    mounted: function(){
        console.log(this.ok)
    },
    components: {
        weatherInfo,
        populationInfo,
        economicInfo,
        environmenInfo,
    },
    
}
</script>
<style>
    .tablePages{
        width: 23%;
        position: relative;
        float: left;
        margin: 0 1%;
        min-height: 570px;
    }

    @media only screen and (min-width: 760px) {
    .page-option {
      margin-top: 10%
    }
}
</style>


